<template>
  <view class="payment-page">
    <!-- 项目信息 -->
    <view class="project-info">
      <view class="info-header">
        <text class="project-name">{{ projectInfo.project_name }}</text>
        <text class="contract-number">{{ projectInfo.contract_number }}</text>
      </view>
      <view class="amount-info">
        <text class="amount-label">申请收款金额：</text>
        <text class="amount-value">¥{{ paymentForm.amount }}</text>
      </view>
    </view>

    <!-- 收款申请表单 -->
    <view class="form-card">
      <view class="form-header">
        <text class="form-title">收款申请</text>
      </view>
      
      <!-- 收款期数 -->
      <view class="form-item">
        <text class="label">收款期数</text>
        <picker 
          :range="periodOptions" 
          :value="periodIndex"
          @change="onPeriodChange"
        >
          <view class="picker">
            <text>{{ paymentForm.period_text || '请选择收款期数' }}</text>
          </view>
        </picker>
      </view>

      <!-- 收款金额 -->
      <view class="form-item">
        <text class="label">收款金额</text>
        <input 
          v-model="paymentForm.amount" 
          class="input" 
          type="number"
          placeholder="请输入收款金额"
        />
      </view>

      <!-- 收款日期 -->
      <view class="form-item">
        <text class="label">收款日期</text>
        <picker 
          mode="date" 
          :value="paymentForm.payment_date" 
          @change="onDateChange"
        >
          <view class="picker">
            <text>{{ paymentForm.payment_date || '请选择收款日期' }}</text>
          </view>
        </picker>
      </view>

      <!-- 收款方式 -->
      <view class="form-item">
        <text class="label">收款方式</text>
        <picker 
          :range="paymentMethods" 
          :value="methodIndex"
          @change="onMethodChange"
        >
          <view class="picker">
            <text>{{ paymentForm.payment_method || '请选择收款方式' }}</text>
          </view>
        </picker>
      </view>

      <!-- 收款备注 -->
      <view class="form-item">
        <text class="label">收款备注</text>
        <textarea 
          v-model="paymentForm.remark" 
          class="textarea" 
          placeholder="请输入收款备注信息"
        />
      </view>

      <!-- 收款凭证 -->
      <view class="form-item">
        <text class="label">收款凭证</text>
        <view class="upload-section">
          <view class="image-list">
            <view 
              v-for="(img, index) in paymentForm.images" 
              :key="index"
              class="image-item"
            >
              <image :src="img" class="upload-image" mode="aspectFill" />
              <view class="delete-btn" @click="deleteImage(index)">×</view>
            </view>
            <view class="upload-btn" @click="chooseImage" v-if="paymentForm.images.length < 9">
              <text class="upload-icon">+</text>
              <text class="upload-text">添加凭证</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 审核流程 -->
    <view class="audit-card">
      <view class="card-header">
        <text class="card-title">审核流程</text>
      </view>
      <view class="audit-list">
        <view class="audit-item" v-for="(audit, index) in auditFlow" :key="index">
          <view class="audit-info">
            <text class="audit-step">{{ audit.step }}</text>
            <text class="audit-person">{{ audit.person }}</text>
          </view>
          <view class="audit-status" :class="audit.status">
            <text class="status-text">{{ audit.status_text }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-section">
      <button class="submit-btn" @click="submitPayment" :disabled="!canSubmit">提交申请</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      projectId: null,
      projectInfo: {
        project_name: '华为总部建设项目',
        contract_number: 'HT2024001',
        settlement_amount: '480000',
        received_amount: '240000'
      },
      paymentForm: {
        period: '',
        period_text: '',
        amount: '',
        payment_date: '',
        payment_method: '',
        remark: '',
        images: []
      },
      periodOptions: ['第1期', '第2期', '第3期', '第4期'],
      paymentMethods: ['银行转账', '现金', '支票', '其他'],
      periodIndex: 0,
      methodIndex: 0,
      auditFlow: [
        {
          step: '财务审核',
          person: '张财务',
          status: 'pending',
          status_text: '待审核'
        },
        {
          step: '上级审核',
          person: '李主管',
          status: 'pending',
          status_text: '待审核'
        },
        {
          step: '管理员审核',
          person: '王经理',
          status: 'pending',
          status_text: '待审核'
        }
      ]
    }
  },
  computed: {
    canSubmit() {
      return this.paymentForm.period && 
             this.paymentForm.amount && 
             this.paymentForm.payment_date && 
             this.paymentForm.payment_method &&
             this.paymentForm.images.length > 0;
    }
  },
  onLoad(options) {
    if (options.id) {
      this.projectId = options.id;
    }
    if (options.data) {
      try {
        const data = JSON.parse(decodeURIComponent(options.data));
        this.projectInfo = { ...this.projectInfo, ...data };
      } catch (error) {
        console.error('解析数据失败:', error);
      }
    }
    if (options.plan) {
      try {
        const plan = JSON.parse(decodeURIComponent(options.plan));
        this.paymentForm.amount = plan.amount;
        this.paymentForm.payment_date = plan.due_date;
      } catch (error) {
        console.error('解析计划数据失败:', error);
      }
    }
    
    // 设置默认日期
    if (!this.paymentForm.payment_date) {
      this.paymentForm.payment_date = this.formatDate(new Date());
    }
  },
  methods: {
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    
    onPeriodChange(e) {
      this.periodIndex = e.detail.value;
      this.paymentForm.period = e.detail.value + 1;
      this.paymentForm.period_text = this.periodOptions[e.detail.value];
    },
    
    onDateChange(e) {
      this.paymentForm.payment_date = e.detail.value;
    },
    
    onMethodChange(e) {
      this.methodIndex = e.detail.value;
      this.paymentForm.payment_method = this.paymentMethods[e.detail.value];
    },
    
    // 选择图片
    chooseImage() {
      uni.chooseImage({
        count: 9 - this.paymentForm.images.length,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.paymentForm.images = [...this.paymentForm.images, ...res.tempFilePaths];
        }
      });
    },
    
    // 删除图片
    deleteImage(index) {
      this.paymentForm.images.splice(index, 1);
    },
    
    // 提交收款申请
    async submitPayment() {
      // 表单验证
      if (!this.paymentForm.period) {
        uni.showToast({ title: '请选择收款期数', icon: 'none' });
        return;
      }
      if (!this.paymentForm.amount) {
        uni.showToast({ title: '请输入收款金额', icon: 'none' });
        return;
      }
      if (!this.paymentForm.payment_date) {
        uni.showToast({ title: '请选择收款日期', icon: 'none' });
        return;
      }
      if (!this.paymentForm.payment_method) {
        uni.showToast({ title: '请选择收款方式', icon: 'none' });
        return;
      }
      if (this.paymentForm.images.length === 0) {
        uni.showToast({ title: '请上传收款凭证', icon: 'none' });
        return;
      }

      try {
        uni.showLoading({ title: '提交中...' });
        
        // 这里调用提交收款申请的API
        // const result = await submitPaymentApplication({
        //   project_id: this.projectId,
        //   ...this.paymentForm
        // });
        
        // 模拟API调用
        setTimeout(() => {
          uni.hideLoading();
          uni.showToast({ title: '申请提交成功', icon: 'success' });
          
          // 延迟返回上一页
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        }, 2000);
        
      } catch (error) {
        uni.hideLoading();
        uni.showToast({ title: '提交失败，请重试', icon: 'none' });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.payment-page {
  min-height: 100vh;
  background: #f5f6fa;
  padding: 30rpx;
  box-sizing: border-box;
}

.project-info {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
}

.info-header {
  margin-bottom: 20rpx;
}

.project-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.contract-number {
  font-size: 24rpx;
  color: #666;
}

.amount-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.amount-label {
  font-size: 28rpx;
  color: #666;
}

.amount-value {
  font-size: 32rpx;
  font-weight: bold;
  color: #409eff;
}

.form-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
}

.form-header {
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.form-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.form-item {
  margin-bottom: 30rpx;
}

.label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 12rpx;
  display: block;
}

.input,
.picker,
.textarea {
  width: 100%;
  border: 1rpx solid #e0e0e0;
  border-radius: 12rpx;
  padding: 20rpx;
  font-size: 28rpx;
  background: #fafafa;
  box-sizing: border-box;
  min-height: 80rpx;
}

.picker {
  height: 80rpx;
  color: #333;
  display: flex;
  align-items: center;
}

.picker text {
  flex: 1;
  font-size: 28rpx;
}

.textarea {
  height: 120rpx;
  resize: none;
  padding-top: 20rpx;
  padding-bottom: 20rpx;
}

.upload-section {
  margin-top: 16rpx;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.image-item {
  position: relative;
  width: 120rpx;
  height: 120rpx;
}

.upload-image {
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
}

.delete-btn {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  width: 32rpx;
  height: 32rpx;
  background: #f56c6c;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
}

.upload-btn {
  width: 120rpx;
  height: 120rpx;
  border: 2rpx dashed #ddd;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.upload-icon {
  font-size: 40rpx;
  color: #999;
  margin-bottom: 8rpx;
}

.upload-text {
  font-size: 20rpx;
  color: #999;
}

.audit-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.audit-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.audit-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx;
  border: 1rpx solid #f0f0f0;
  border-radius: 12rpx;
}

.audit-info {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.audit-step {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.audit-person {
  font-size: 24rpx;
  color: #666;
}

.audit-status {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}

.audit-status.pending {
  background: #fff7e6;
  color: #fa8c16;
}

.audit-status.approved {
  background: #f6ffed;
  color: #52c41a;
}

.audit-status.rejected {
  background: #fff2f0;
  color: #ff4d4f;
}

.status-text {
  font-size: 24rpx;
}

.submit-section {
  margin-top: 30rpx;
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background: #409eff;
  color: #fff;
  border-radius: 12rpx;
  font-size: 32rpx;
  border: none;
}

.submit-btn:disabled {
  background: #ccc;
  color: #999;
}
</style> 